<div>
    Bantuan :
</div>
<div>
    <select id="banps" onChange="javascript:updateList();">
        <option value="0">.....</option>
        <?php foreach ($banPS as $ban) { ?>
            <option value="<?php echo $ban->id ?>"><?php echo $ban->code; ?> : <?php echo $ban->name; ?></option>
        <?php } ?>
    </select>
    <span id="banps-name"></span>
</div>
<div class="container">
    Lokasi :
</div>
<div>
    <input type="text" id="lokasi" style="width: 18.5em;"/>
    <input type="hidden" id="kab" />
</div>
<div>
    <button onClick="javascript:addBanPS();">Add</button>
</div>
<div>
    <table>
        <thead>
            <tr>
                <th>Kabupaten</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody id="banps-list">
        </tbody>
    </table>
</div>
<script type="text/javascript">
        $(document).ready(function() {
            $("#lokasi").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "<?php echo site_url("service/autocompletesearch/lockab"); ?>",
                        method: "POST",
                        dataType: "json",
                        data: {
                            keywords: request.term
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                minLength: 2,
                focus: function(event, ui) {
                    $("#lokasi").val(ui.item.label);
                    return false;
                },
                select: function(event, ui) {
                    $("#lokasi").val(ui.item.label);
                    $("#kab").val(ui.item.value);
                    return false;
                }
            });
        });

        function addBanPS() {
            var data = {
                banps: $("#banps").val(),
                kab: $("#kab").val()
            };
            // send
            $.ajax({
                type: "POST",
                url: "<?php echo site_url("data/addBanPS"); ?>",
                data: data,
                beforeSend: function(xhr) {
                },
                success: function(result, status, xhr) {
                    updateList();
                },
                error: function(xhr, status, error) {
                }
            });
        }

        function updateList() {
            // send
            $.ajax({
                type: "POST",
                url: "<?php echo site_url("service/getDataJSON/banpslist"); ?>",
                data: {
                    banps: $("#banps").val(),
                    level: "kab"
                },
                dataType: "json",
                beforeSend: function(xhr) {
                    $("#banps-list").html("");
                },
                success: function(data) {
                    for (var i = 0; i < data.length; i++) {
                        var row = data[i];
                        var tr = "<tr>" + "<td>" + row.display_name + "</td><td>" + "<button onClick='javascript:del(" + $("#banps").val() + ", " + row.code + ")'>Del</button>" + "</td>" + "</tr>";
                        $("#banps-list").append(tr);
                    }
                },
                error: function(xhr, status, error) {
                }
            });
        }

        function del(banps, kab) {
            var data = {
                banps: banps,
                kab: kab
            };
            // send
            $.ajax({
                type: "POST",
                url: "<?php echo site_url("data/delBanPS"); ?>",
                data: data,
                beforeSend: function(xhr) {
                },
                success: function(result, status, xhr) {
                    updateList();
                },
                error: function(xhr, status, error) {
                }
            });
        }
</script>